<template>
	<view class="page-group">
		<image class="bg-img-view" :src="base.PHPimgUrl + '/login/img_login_bg.png'"></image>
		<view class="top-group-view">
			<uv-navbar :autoBack="true" :fixed="false" bg-color="rgba(0,0,0,0)"></uv-navbar>
			<view class="center-group-view">
				<view class="input-group-view">
					<view style="height: 26rpx"></view>
					<!-- 请输入手机号 -->
					<view class="input-item_view">
						<image :src="base.PHPimgUrl + '/login/icon_number.png'"></image>
						<input
							class="input-box-view"
							v-model="inputNumber"
							type="number"
							maxlength="11"
							placeholder="请输入手机号"
							confirm-type="next"
							placeholder-class="placeholder-view"
						/>
					</view>
					<!-- 输入密码 -->
					<view class="input-item_view">
						<image :src="base.PHPimgUrl + '/login/icon_password.png'"></image>
						<input
							class="input-box-view"
							v-model="inputPwd"
							type="text"
							:password="showPassword"
							placeholder="请输入密码"
							confirm-type="next"
							placeholder-class="placeholder-view"
						/>
						<view style="margin-right: 20rpx">
							<uv-icon size="18px" :name="showPassword ? 'eye-off-outline' : 'eye'" @click="showPassword = !showPassword"></uv-icon>
						</view>
					</view>
					<!-- 确认密码 -->
					<view class="input-item_view" v-if="isRegister">
						<image :src="base.PHPimgUrl + '/login/icon_password.png'"></image>
						<input
							class="input-box-view"
							v-model="inputPwd1"
							type="text"
							:password="showPassword1"
							placeholder="确认密码"
							confirm-type="next"
							placeholder-class="placeholder-view"
						/>
						<view style="margin-right: 20rpx">
							<uv-icon size="18px" :name="showPassword1 ? 'eye-off-outline' : 'eye'" @click="showPassword1 = !showPassword1"></uv-icon>
						</view>
					</view>
					<view @click="numberLoginClick()" class="login-btn-view">登录</view>
				</view>
				<view class="remind-txt-view">
					<text @click="changeLoginClick()" v-if="isRegister">已有账号？点我登录</text>
					<text @click="changeRegisterClick()" v-else>没有账号？点我注册</text>
				</view>
			</view>
		</view>
		<view class="bottom-group-view">
			<!-- <button class='wx-login-view' open-type="getUserProfile" @click="getuserinfo">
				<image class="wx-login-image" :src="base.PHPimgUrl + '/login/ic_wx_logo.png'"></image>
			</button> -->
			<view style="display: flex; margin-top: 32rpx" class="agreement-view">
				<view @click="checkAgreenClick()" style="display: flex; align-items: center">
					<dx-icons v-if="isCheck" color="#F7CB47" size="30rpx" type="circle-filled" />
					<dx-icons v-else color="#ccc" size="30rpx" type="circle" />
					我已阅读并同意
				</view>
				<view class="agreement-view">
					<text @click="registerPolicyClick()" class="agreement-text">《抖鑫用户使用协议》</text>
					<text @click="privacyPolicyClick()" class="agreement-text">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import base from '@/common/baseURL.js';
import api from '@/common/api.js';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserinfoStore } from '@/stores/userInfo';
const userInfo_Store = useUserinfoStore();

//手机号
const inputAccount = ref('');
//禁用
const disabled = ref(false);

//密码
const inputPwd = ref('');
//二次密码
const inputPwd1 = ref('');
//是否同意
const isCheck = ref(false);
const inputNumber = ref('');
//查看密码
const showPassword = ref(true);
//查看密码
const showPassword1 = ref(true);
//是否注册
const isRegister = ref(false);
const currentTab = ref(1);
let loginParams = {};

onLoad((options) => {
	if (options.loginParams) {
		loginParams = JSON.parse(options.loginParams);
		isRegister.value = loginParams.isRegister;
		isCheck.value = true;
	}
});
const inputReference = ref(getApp().globalData.higherlevelId);

//已有账号
const changeLoginClick = () => {
	isRegister.value = false;
	currentTab.value = 1;
};
//注册
const changeRegisterClick = () => {
	isRegister.value = true;
	currentTab.value = 0;
};
/**
 * 密码登录
 */
const numberLoginClick = () => {
	if (checkParamsForCode()) {
		var params;
		//新用户带过来的参数
		if (loginParams.unionId) {
			params = {
				phone: inputNumber.value,
				captcha: inputPwd.value,
				unionId: loginParams.unionId,
				platform: 1
			};
			codeLoginClick(params);
		} else {
			//老用户
			uni.login({
				scopes: 'auth_user',
				success: (loginInfo) => {
					params = {
						phone: inputNumber.value,
						captcha: inputPwd.value,
						code: loginInfo.code,
						platform: 1
					};
					codeLoginClick(params);
				}
			});
		}
	}
};
const codeLoginClick = async (params) => {
	const res = await api.codeLogin_API(params);
	if (res.code === 10000) {
		let loinMsgDict = res.data.token;
		if (loinMsgDict) {
			userInfo_Store.Login(loinMsgDict);
			await userInfo_Store.GetUserInfo();
			uni.switchTab({
				url: '/pages/main/main'
			});
		}
	}
};
const checkParamsForCode = () => {
	if (inputNumber.value.length < 11) {
		uni.showToast({
			title: '请输入11位手机号码',
			icon: 'none',
			duration: 2000
		});
		return false;
	}
	if (!inputPwd.value) {
		uni.showToast({
			title: '请输入密码',
			icon: 'none',
			duration: 2000
		});
		return false;
	}
	if (!inputPwd1.value && isRegister.value) {
		uni.showToast({
			title: '请确认密码',
			icon: 'none',
			duration: 2000
		});
		return false;
	}
	if (inputPwd.value != inputPwd1.value && isRegister.value) {
		uni.showToast({
			title: '两次密码不一样',
			icon: 'none',
			duration: 2000
		});
		return false;
	}
	if (!isCheck.value) {
		uni.showToast({
			title: '请先勾选同意用户协议',
			icon: 'none',
			duration: 2000
		});
		return false;
	}
	return true;
};
const checkAgreenClick = () => {
	if (isCheck.value) {
		isCheck.value = false;
	} else {
		isCheck.value = true;
	}
};
const registerPolicyClick = () => {
	uni.navigateTo({
		url: '/pages/index/h5Webview?titleStr=用户协议&url=' + encodeURIComponent(JSON.stringify(base.registerPolicy))
	});
};
const privacyPolicyClick = () => {
	uni.navigateTo({
		url: '/pages/index/h5Webview?titleStr=隐私政策&url=' + encodeURIComponent(JSON.stringify(base.privacyPolicy))
	});
};
</script>

<style scoped>
.page-group {
	position: relative;
	width: 100vw;
	height: 100vh;
}

.top-group-view {
	display: flex;
	flex-direction: column;
	position: absolute;
}

.top-title-view {
	display: flex;
	align-items: center;
}

.bg-img-view {
	width: 100vw;
	height: 100vh;
	position: absolute;
}

.back-img-view {
	width: 40rpx;
	height: 40rpx;
	margin-left: 32rpx;
}

.center-group-view {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
}

.title-group-view {
	width: 476rpx;
	height: 76rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 36rpx;
	background: #ffffff;
	border-radius: 38rpx;
	margin-bottom: 90rpx;
}

.title-tab-native {
	width: 240rpx;
	line-height: 76rpx;
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	background: linear-gradient(138deg, #f7cb47 0%, #d4ce4e 100%);
	border-radius: 76rpx;
}

.title-tab-normal {
	width: 240rpx;
	line-height: 76rpx;
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #cccccc;
	text-align: center;
}

.input-group-view {
	width: 91.2vw;
	margin-left: 4.3vw;
	margin-right: 4.3vw;
	background-color: #ffffff;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
}

.input-item_view {
	margin-left: 60rpx;
	margin-right: 60rpx;
	margin-top: 58rpx;
	height: 88rpx;
	background: #ffffff;
	border-radius: 38rpx;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: row;
	align-items: center;
}

.input-item_view image {
	width: 40rpx;
	height: 40rpx;
	margin-left: 36rpx;
	margin-right: 12rpx;
}

.input-box-view {
	flex: 1;
	height: 88rpx;
	font-size: 28rpx;
	font-family: AppleSystemUIFont;
	color: #666666;
	margin-right: 36rpx;
}

.send-code-txt {
	font-size: 28rpx;
	font-family: AppleSystemUIFont;
	color: #a6a6a6;
	line-height: 88rpx;
	text-align: center;
	margin-right: 26rpx;
}

.placeholder-view {
	color: #ccc;
}

.login-btn-view {
	margin-left: 50rpx;
	margin-right: 50rpx;
	margin-top: 160rpx;
	background: linear-gradient(138deg, #f7cb47 0%, #d4ce4e 100%);
	border-radius: 88rpx;
	line-height: 88rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
}

.remind-txt-view {
	font-size: 28rpx;
	font-family: AppleSystemUIFont;
	color: #666666;
	line-height: 44rpx;
	margin-top: 26rpx;
	margin-bottom: 22rpx;
	display: flex;
	justify-content: center;
}

.bottom-group-view {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
	width: 100vw;
	margin-bottom: 80rpx;
}

.wx-login-view {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0);
}

.wx-login-image {
	width: 60rpx;
	height: 60rpx;
	margin: 20rpx;
}

button::after {
	border: 0;
}

.agreement-view {
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #cccccc;
	line-height: 44rpx;
}

.agreement-image {
	width: 26rpx;
	height: 26rpx;
	margin: 9rpx;
}

.agreement-text {
	color: #5271ff;
	background: linear-gradient(135deg, #f7cb47 0%, #c2cf51 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
</style>
